<template>
    <j-modal
      :title="title"
      :width="600"
      :visible="visible"
      :maskClosable="false"
      :keyboard="false"
      :forceRender="true"
      @cancel="handleCancel"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 100%;overflow-y: hidden">
      <template slot="footer">
        <a-button key="back" v-if="isReadOnly" @click="handleCancel">
          取消
        </a-button>
        <a-button key="back" @click="handleCancel">关闭</a-button>
      </template>
      <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item  label="工程名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
           {{model.engineerName}}
        </a-form-item>
        <a-form-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            {{model.name}}
        </a-form-item>
         <a-form-item label="产品型号" :labelCol="labelCol" :wrapperCol="wrapperCol" >
           {{model.model}}
        </a-form-item>
        <a-form-item label="产品规格" :labelCol="labelCol" :wrapperCol="wrapperCol" >
           {{model.sizeX}}x
           {{model.unitX}}x
           {{model.sizeY}}
        </a-form-item>
        <a-form-item  label="产品数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
           {{model.num}}
        </a-form-item>
        <a-form-item  label="产品单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
          {{model.unit}}
        </a-form-item>
        <a-form-item label="信息描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea :rows="4" placeholder="请输入信息描述" v-decorator="[ 'description' ]"  :readOnly="true"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="产品造型">
          <j-image-upload v-model="fileList" bizPath="produce" text="上传" isMultiple disabled></j-image-upload>
        </a-form-item>
      </a-form>
    </a-spin>
    </j-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import JUpload from '@/components/jeecg/JUpload'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  export default {
    name: 'EngineerProduceDetail',
    components: {
      JImageUpload,
      JUpload
    },
    data () {
      return {
        title:"详情",
        visible: false,
        isReadOnly: false,
        modalWidth:600,
        drawerWidth:600,
        model: {},
        fileList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: this.$form.createForm(this),
        uploadLoading:false,
        confirmLoading: false,
        headers:{},
        dataSource: [],
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    methods: {
      show(record) {
        //附件下载
        // this.fileList = record.fileName
        if(JSON.stringify(record) === '{}') {
          this.fileList = []
        } else {
          setTimeout(() => {
            this.fileList = record.fileName
          }, 5)
        }
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'engineerName','name','model','sizeX','unitX','sizeY','description'))
        });
      },

      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      }
    }
  }
</script>

<style lang="less" scoped>
@import "chart";
</style>